<template>
    <div id="app">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="版权名">
          <el-input v-model="kehuQuery.copyrightName" placeholder="版权名"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="kehuQuery.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findPage()">查询</el-button>
        </el-form-item>
        <el-button type="primary" @click="resetData()">清空</el-button>
        <el-button type="primary" @click="reset()">返回</el-button>
        <router-link :to="'/copyrightin/cmi/create'">
          <el-button type="primary">添加客户</el-button>
        </router-link>
      </el-form>
      <el-table :data="kehuList" style="width: 100%">
        <el-table-column prop="copyrightName" label="版权名" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="isSex" label="性别">
          <template slot-scope="scope">
            {{ scope.row.isSex === 1 ? '女':'男' }}
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="出生日期" width="180" />
        <el-table-column prop="post" label="职务"/>
        <el-table-column prop="tel" label="手机号" width="180" />
        <el-table-column prop="landline" label="座机号" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="qq" label="QQ" width="180" />
        <el-table-column prop="address" label="公司地址" width="180" />
        <el-table-column prop="remarks" label="备注" width="180" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="deleteKehu(scope.row.id)">删除</el-button>
            <router-link :to="'/copyrightin/cmi/update/'+scope.row.id">
              <el-button type="primary">修改</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :page-size="pageSize"
        :current-page="pageNo"
        :total="total"
        :pager-count="11"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="findPage">
      </el-pagination>
    </div>
</template>

<script>
  import kehu from "@/api/copyrightin/kehu";
  import book from "@/api/cms/book";
    export default {
       data() {
         return{
           kehuList: null, // ## 查询条件的数据列表
           kehu:{}, // ## 添加的客户对象
           kehuQuery:{}, // ## 查询条件封装对象
           total: 0, // ## 总记录数
           pageNo: 1, // ## 页码
           pageSize : 10, // ## 每页显示记录数
           currentTime:'' // ## 当前时间
         }
       },
      created() {
         this.findPage()
      },
      methods: {
         findPage(pageNo = 1) { // ## 分页查询
           this.pageNo = pageNo
           // 调用后端请求方法
           kehu.query(this.pageNo,this.pageSize,this.kehuQuery)
               .then(response => { // ## 成功之后执行的方法
                 this.kehuList = response.data.items
                 this.total = response.data.total
               })
         },
        resetData() { // ## 查询条件清空
           this.kehuQuery = {}
           this.findPage()
        },
        reset() { // ## 返回至版权管理的list页面
          this.$router.push('/copyrightin/cmi/list')
        },
        deleteKehu(kehuId) { // ## 删除客户
          this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            kehu.deleteKehu(kehuId)
              .then(response => {
                // 成功删除后，做消息提示
                this.$message({
                  type:'success',
                  message:'删除成功！'
                })
                // 重新查询
                this.findPage()
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      }
    }
</script>

<style scoped>

</style>
